<template>
  <Page :title="navTitle" @gesture="onGesture">
    <template v-slot:navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff;">{{ navTitle }}</span>
        </div>
        <div class="nav-bar-btns flex" style="margin-left: auto;">
        <div class="item flex items-center mr-24px" @click="goToScantron">
          <img class="icon mt-2px mr-4px" src="static/icons/scantron.png" mode="" />
          <span class="name text-white">答题卡</span>
        </div>
        <div class="item flex items-center" @click="addErrorsBook">
          <img class="icon mt-2px mr-4px" src="static/icons/add-note.png" mode="" />
          <span class="name text-white">加入错题本</span>
        </div>
      </div>
      </div>
     
    </template>
    <template v-slot:content>
      <div class="w-full h-full p-20px box-border">
        <div class="container w-full h-full bg-white p-20px box-border overflow-hidden">
          <div ref="scroll" class="w-full h-full overflow-scroll">
            <!-- 客观题 -->
            <Objective :questions="questions" :question-index="questionIndex"></Objective>
            <!-- 主观题 -->
            <Subjective :questions="questions" :question-index="questionIndex"></Subjective>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
// import Page from '@/components/page'
import Page from '@/components/page/newPage'
import Objective from './components/objective/index'
import Subjective from './components/subjective/index'
import { createWqBookApi } from '@/api/wq-book'
import { mapState } from 'vuex'

export default {
  components: {
    Page,
    Objective,
    Subjective
  },
  data() {
    return {
      isOnlyShowErrorQuestions: false,
      questionIndex: 0
    }
  },
  computed: {
    ...mapState(['homework']),
    questions() {
      const { questions } = this.homework.currentHomework

      return questions
    },
    navTitle() {
      const order = this.questionIndex + 1
      const total = this.questions.length
      return `第${order}题(${order}/${total})`
    }
  },
  watch: {
    questionIndex() {
      this.$refs.scroll.scrollTo(0, 0)
    }
  },
  created() {
    const { all = '0', index = '' } = this.$route.query

    this.isOnlyShowErrorQuestions = parseInt(all) === 0 ? true : false

    const questionIndex = parseInt(index)
    if (questionIndex === 0 || !!questionIndex) this.questionIndex = questionIndex
  },
  mounted() {
    console.log(
      'currentHomework =>',
      this.homework.currentHomework,
      'questions =>',
      this.questions,
      'questionIndex =>',
      this.questionIndex
    )
    this.setNextQuestionIndex()
  },
  methods: {
    back() {
      this.$router.back()
    },
    onGesture(direction) {
      switch (direction) {
        case 'right':
          // 上一题
          this.setNextQuestionIndex('prev')
          break
        case 'left':
          // 下一题
          this.setNextQuestionIndex('next')
          break
        default:
          break
      }
    },
    setNextQuestionIndex(type = '') {
      const { isOnlyShowErrorQuestions } = this

      switch (type) {
        case '':
          // 初始化
          if (isOnlyShowErrorQuestions) {
            const { questionIndex: currentQuestionIndex } = this
            const currentQuestion = this.questions[currentQuestionIndex]

            const firstErrorQuestion = this.questions.find((q) => q.remoteStudentAnswerStatus === 0)

            if (firstErrorQuestion.questionId === currentQuestion.questionId) {
              break
            }

            for (let index = 0; index < this.questions.length; index++) {
              if (
                this.questions[index]['remoteStudentAnswerStatus'] === 0 &&
                index > currentQuestionIndex
              ) {
                this.questionIndex = index
                break
              }
            }
          }
          break
        case 'prev':
          // 上一题
          if (this.questionIndex >= 1) {
            if (isOnlyShowErrorQuestions) {
              const { questionIndex: currentQuestionIndex } = this
              const arr = this.questions
                .map((q, index) => {
                  if (q.remoteStudentAnswerStatus === 0 && index < currentQuestionIndex) {
                    return index
                  }

                  return null
                })
                .filter((s) => s === 0 || s)

              if (arr.length == 0) {
                this.$message.info('无更多题目')
                break
              }

              this.questionIndex = arr[arr.length - 1]
              break
            }

            this.questionIndex--
          } else {
            this.$message.info('无更多题目')
          }
          break
        case 'next':
          // 下一题
          if (this.questionIndex < this.questions.length - 1) {
            if (isOnlyShowErrorQuestions) {
              if (isOnlyShowErrorQuestions) {
                const { questionIndex: currentQuestionIndex } = this
                const arr = this.questions
                  .map((q, index) => {
                    if (q.remoteStudentAnswerStatus === 0 && index > currentQuestionIndex) {
                      return index
                    }

                    return null
                  })
                  .filter((s) => s)

                if (arr.length == 0) {
                  this.$message.info('无更多题目')
                  break
                }

                this.questionIndex = arr[0]
                break
              }
            }

            this.questionIndex++
          } else {
            this.$message.info('无更多题目')
          }
          break
        default:
          break
      }
    },
    goToScantron() {
      this.$router.back()
    },
    async addErrorsBook() {
      const index = this.questionIndex
      const questions = this.questions
      const {
        questionId,
        remoteStudentAnswer: { studentAnswer, studentAnswerUrl }
      } = questions[index]

      const { data } = await createWqBookApi({
        questionId,
        questionSourceType: 2,
        answerRecord: studentAnswer,
        answerPicture: studentAnswerUrl
      })

      if (!!parseInt(data)) {
        this.$message.info('加入错题本成功')
      } else {
        this.$message.info('已加入错题本')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.nav-bar-btns {
  .item {
    height: 34px;
    .icon {
      width: 34px;
      height: 34px;
    }

    .name {
      font-size: 26px;
      line-height: 26px;
    }
  }
}

.container {
  // border-radius: 16px;
}
</style>
